<template>
  <div :class="real_them">
    <MenuVue />
    <div class="main">
      <div class="base">
        <div class="nav-bar">
          <ul>
            <li @click="navList1" :class="nav_list1">个人资料</li>
            <li @click="navList2" :class="nav_list2">账号设置</li>
            <li @click="navList3" :class="nav_list3">我的动态</li>
            <li @click="navList4" :class="nav_list4">我的收藏</li>
          </ul>
        </div>
        <div class="center"></div>

        <div v-if="navList == 1" class="base-info">
          <div class="general-info">
            <div class="general-info-avatar">
              <img :src="img" alt="" />
            </div>

            <div class="general-info-t-info">
              <div class="profile-name-info" style="display: flex">
                <div class="person-name">
                  {{ this.username }}
                </div>
                <input
                  class="file"
                  type="file"
                  id="file1"
                  accept=".jpg, .jpeg, .png"
                />
                <label for="file1">
                  <div class="content-show-l modify">更换头像</div>
                </label>
              </div>
            </div>
          </div>
          <div class="base-info-head">基本信息</div>
          <div class="base-info-content">
            <form
              class="
                el-form
                base-info-edit-form
                el-form--label-top el-form--inline
              "
            >
              <ul>
                <li @mouseenter="icon1 = !icon1" @mouseleave="icon1 = !icon1">
                  <div class="content-show-l">用户昵称</div>
                  <div v-if="!this.userNameInput" class="content-show-r">
                    {{ this.username }}
                  </div>
                  <div v-if="this.userNameInput" class="edit-nickname">
                    <div
                      style="vertical-align: middle; margin-bottom: 0px"
                      class="el-form-item is-success is-required is-no-asterisk"
                    >
                      <div class="el-form-item__content">
                        <div class="el-input">
                          <input
                            type="text"
                            autocomplete="off"
                            placeholder="请输入昵称"
                            class="el-input__inner"
                            v-model="username"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-if="this.userNameInput" class="edit-btn">
                    <button
                      type="button"
                      @click="Submitname"
                      class="
                        el-button
                        edit-btn-save
                        el-button--primary el-button--small
                        is-round
                      "
                    >
                      <span>暂存</span>
                    </button>
                    <button
                      @click="editcancelname"
                      type="button"
                      class="
                        el-button
                        edit-btn-cancel
                        el-button--default el-button--small
                        is-round
                      "
                    >
                      <span>取消</span>
                    </button>
                  </div>
                  <div
                    v-if="this.icon1 && !this.userNameInput"
                    @click="editname"
                    class="edit-icon"
                  >
                    <i></i>编辑
                  </div>
                </li>

                <li>
                  <div class="content-show-l">
                    <span>用</span> <span>户</span><span>ID</span>
                  </div>
                  <div class="content-show-r">
                    {{ this.$store.state.infomation.id }}
                  </div>
                </li>

                <li>
                  <div class="content-show-l">
                    <span>用</span> <span>户</span><span>姓</span
                    ><span>名</span>
                  </div>
                  <div class="content-show-r">
                    {{ this.$store.state.infomation.name }}
                  </div>
                </li>

                <li @mouseenter="icon2 = !icon2" @mouseleave="icon2 = !icon2">
                  <div class="content-show-l">
                    <span>性</span><span>别</span>
                  </div>
                  <div v-if="!this.sexRadio" class="content-show-r">
                    {{ sex }}
                  </div>

                  <div
                    v-if="this.sexRadio"
                    class="edit-gender"
                    style="margin-right: 15px"
                  >
                    <el-radio v-model="radio" label="1">男</el-radio>
                    <el-radio v-model="radio" label="0">女</el-radio>
                  </div>
                  <div v-if="this.sexRadio" class="edit-btn">
                    <button
                      type="button"
                      @click="Submitsex"
                      class="
                        el-button
                        edit-btn-save
                        el-button--primary el-button--small
                        is-round
                      "
                    >
                      <span>暂存</span>
                    </button>
                    <button
                      @click="editcancelsex"
                      type="button"
                      class="
                        el-button
                        edit-btn-cancel
                        el-button--default el-button--small
                        is-round
                      "
                    >
                      <span>取消</span>
                    </button>
                  </div>
                  <div
                    v-if="this.icon2 && !this.sexRadio"
                    @click="editsex"
                    class="edit-icon"
                  >
                    <i></i>编辑
                  </div>
                </li>

                <!-- <li @mouseenter="icon3 = !icon3" @mouseleave="icon3 = !icon3">
                  <div class="content-show-l">个人简介</div>
                  <div v-if="!this.Textarea" class="content-show-r no-data">
                    未填写
                  </div>

                  <div
                    v-if="this.Textarea"
                    class="block"
                    style="margin-right: 15px; width: 50%"
                  >
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请输入内容"
                      v-model="textarea"
                    >
                    </el-input>
                  </div>
                  <div v-if="this.Textarea" class="edit-btn">
                    <button
                      type="button"
                      class="
                        el-button
                        edit-btn-save
                        el-button--primary el-button--small
                        is-round
                      "
                    >
                      <span @click="SubmitTextarea">提交</span>
                    </button>
                    <button
                      @click="editcancelTextarea"
                      type="button"
                      class="
                        el-button
                        edit-btn-cancel
                        el-button--default el-button--small
                        is-round
                      "
                    >
                      <span>取消</span>
                    </button>
                  </div>

                  <div
                    v-if="this.icon3 && !this.Textarea"
                    @click="editTextarea"
                    class="edit-icon"
                  >
                    <i></i>编辑
                  </div>
                </li> -->
                <li @mouseenter="icon4 = !icon4" @mouseleave="icon4 = !icon4">
                  <div class="content-show-l">出生日期</div>
                  <div v-if="!this.timePicker" class="content-show-r no-data">
                    {{ time(this.timevalue) }}
                  </div>
                  <div
                    v-if="this.timePicker"
                    class="block"
                    style="margin-right: 15px"
                  >
                    <el-date-picker
                      v-model="timevalue"
                      type="datetime"
                      placeholder="选择日期时间"
                    >
                    </el-date-picker>
                  </div>
                  <div v-if="this.timePicker" class="edit-btn">
                    <button
                      type="button"
                      @click="SubmitTime"
                      class="
                        el-button
                        edit-btn-save
                        el-button--primary el-button--small
                        is-round
                      "
                    >
                      <span>暂存</span>
                    </button>
                    <button
                      @click="editcanceltime"
                      type="button"
                      class="
                        el-button
                        edit-btn-cancel
                        el-button--default el-button--small
                        is-round
                      "
                    >
                      <span>取消</span>
                    </button>
                  </div>
                  <div
                    v-if="this.icon4 && !this.timePicker"
                    @click="edittime"
                    class="edit-icon"
                  >
                    <i></i>编辑
                  </div>
                </li>
                <li>
                  <div class="content-show-l">
                    <span>用</span> <span>户</span><span>年</span
                    ><span>龄</span>
                  </div>
                  <div class="content-show-r">
                    {{ this.$store.state.infomation.age }}
                  </div>
                </li>
                <li>
                  <div class="content-show-l modify" @click="updateInfo">
                    完成修改
                  </div>
                </li>
              </ul>
            </form>
          </div>
        </div>

        <div v-if="navList == 2" class="accout-body">
          <span class="accout-body-title">账号设置</span>
          <ul>
            <li class="accout-body-item">
              <span> <span>密</span><span>码</span></span>
              <p>
                <a @click="editpassword" href="#/password" class="">修改密码</a>
              </p>
            </li>
            <div v-if="this.icon5" class="Change-Password">
              <div style="display: flex; margin: 20px">
                <label style="line-height: 40px">输入新密码：</label>
                <el-input
                  style="width: 40%"
                  placeholder="输入新密码"
                  v-model="password"
                  show-password
                ></el-input>
              </div>
              <div style="display: flex; margin: 20px; margin-bottom: 0">
                <label style="line-height: 40px">确认新密码：</label>
                <el-input
                  style="width: 40%"
                  placeholder="确认新密码"
                  v-model="passwords"
                  show-password
                ></el-input>
              </div>
              <p v-if="this.icon7" class="passwordtext">{{ passwordtext }}</p>
              <div style="margin-left: 15%; margin-top: 2%">
                <button
                  type="button"
                  class="
                    el-button
                    edit-btn-save
                    el-button--primary el-button--small
                    is-round
                  "
                >
                  <span @click="Submitpassword">提交</span>
                </button>
                <button
                  @click="editpassword"
                  type="button"
                  class="
                    el-button
                    edit-btn-cancel
                    el-button--default el-button--small
                    is-round
                  "
                >
                  <span>取消</span>
                </button>
              </div>
            </div>
            <li class="accout-body-item">
              <span><span>手</span><span>机</span></span>
              <p>
                <span>182****5702</span
                ><a href="#/cellphone" class="">修改手机</a>
              </p>
            </li>

            <li class="accout-body-item">
              <span>账号注销</span>
              <p><a @click="cancellation" href="#/out" class="">立即注销</a></p>
            </li>

            <div v-if="this.icon6" class="account-box">
              <div class="module_rules">
                <h2>
                  账号注销则视为您主动放弃以下资产和权益，且同意以下规则：
                </h2>
                <p>
                  1.账号注销后，您将无法登录、使用账号，且不支持找回任何个人资料。<br />
                  2.该账号将解除与其他产品的绑定或授权关系，且不支持找回。<br />
                  3.将不再支持使用已注销账号的用户ID注册新的账号。<br />
                  4.注销账号并不代表您注销前的账号行为和相关责任得到豁免或减轻。
                </p>
                <div><span>已知悉，确认注销账号</span></div>
              </div>
            </div>
          </ul>
        </div>

        <div v-if="navList == 3" class="dynamic-body">
          <div class="dynamic-title">
            <span>我的动态</span>
          </div>

          <Dynamic_detailVue
            style="width: 85%; margin-bottom: 20px"
            v-for="i in this.$store.state.userdynamics"
            :key="i.id"
            :id="i.id"
            :title="i.title"
            :introduce="i.context"
            :author="i.username"
            :like="i.likes"
            :comment="i.comment.length"
            :comments="i.comments"
            :tag="JSON.parse(JSON.parse(i.tag))"
            :date="time(i.time)"
            :likeusers = "i.likeusers"
            :icon = "i.icon"
          />
          <FooterVue id="Foot" :context="this.$store.state.footerTip" />
        </div>

        <div v-if="navList == 4" class="collection-body">
          <div class="collection-title">
            <span>我的收藏</span>
          </div>

          <infomation_Collection
            style="width: 85%; margin-bottom: 20px"
            v-for="i in this.$store.state.collect"
            :key="i.id"
            :id="i.id"
            :title="i.title"
            :date="time(i.time)"
            :tag="JSON.parse(JSON.parse(i.tag))"
          />
          <FooterVue id="Foot" :context="this.$store.state.footerTip" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MenuVue from "../components/Menu.vue";
import LikeDynamic from "../api/getSingleDynamic.js";
import LikeBlog from "../api/getSingleCollect.js";
import Dynamic_detailVue from "../re_components/Dynamic_detail.vue";
import infomation_Collection from "../re_components//infomation_Collection.vue";
import FooterVue from "../re_components/Footer.vue";
import To_Up from "../api/updateUserInfo.js";
import axios from "axios";
import { time } from "../utils/time.js";
export default {
  name: "Infomation",
  components: { MenuVue, FooterVue, infomation_Collection, Dynamic_detailVue },
  data() {
    return {
      them: "contain",
      footerTip: "加载中~~",
      navList: 1,
      collect: [],
      collects: [],
      userdynamics: [],
      dynamics: [],
      nav_list1: "actived nav-list", //导航标签
      nav_list2: "nav-list", //导航标签
      nav_list3: "nav-list", //导航标签
      nav_list4: "nav-list", //导航标签
      icon1: false, //是否显示修改
      icon2: false, //是否显示修改
      icon3: false, //是否显示修改
      icon4: false, //是否显示修改
      icon5: false, //是否显示修改密码内容
      icon6: false, //是否显示注销账号
      icon7: false, //是否显示修改密码提示内容
      userNameInput: false, //是否显示修改用户名内容
      sexRadio: false, //是否显示修改性别
      timePicker: false, //是否显示修改出生日期
      Textarea: false, //是否显示修改个人简介
      username: "", //用户名
      radio: '1', //性别
      timevalue: "", //出生日期
      textarea: "", //个人简介
      password: "", //密码
      passwords: "", //再次输入密码
      passwordtext: "", //输入密码提示
      img: "", // 用户头像路径
      file: "",
      icondata: "",
    };
  },
  mounted() {
    let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    if (userinfo) {
      this.$store.commit("tologin", true);
      this.$store.commit("addInfomation", userinfo);
    }

    //跳转读取显示页面
    this.navList = localStorage.getItem("navlist");
    this.username = this.$store.state.infomation.username;
    this.timevalue = this.$store.state.infomation.birthday;
    this.radio = this.$store.state.infomation.sex + '';
    this.footerTip = this.$store.state.footerTip;

    let Tuserdynamics = JSON.parse(sessionStorage.getItem("userdynamics"));
    if (Tuserdynamics.length != 0) {
      this.$store.commit("adduserdynamics", Tuserdynamics);
    } else {
      let artical = this.$store.state.infomation.artical
        ? JSON.parse(JSON.parse(this.$store.state.infomation.artical))
        : [];
      for (let index = 0; index < artical.length; index++) {
        let params = new URLSearchParams();
        params.append("id", artical[index]);
        LikeDynamic(params).then((res) => {
          if (res.status == 200) {
            this.userdynamics[index] = res.data.infomation[0];
            if (this.userdynamics[index].comment !== "") {
              this.userdynamics[index].comment = JSON.parse(
                JSON.parse(this.userdynamics[index].comment)
              );
            }
          } else if (res.status == 401) {
            this.$store.state.footerTip = "加载失败了";
          }
        });
      }
      this.$store.commit("adduserdynamics", this.userdynamics);
      setTimeout(() => {
        sessionStorage.setItem(
          "userdynamics",
          JSON.stringify(this.userdynamics)
        );
      }, 1000);
    }

    let Tcollects = JSON.parse(sessionStorage.getItem("collects"));
    if (Tcollects) {
      this.$store.commit("addcollect", Tcollects);
    } else {
      let collection = this.$store.state.infomation.collection
        ? JSON.parse(JSON.parse(this.$store.state.infomation.collection))
        : [];
      for (let x = 0; x < collection.length; x++) {
        let params = new URLSearchParams();
        params.append("id", collection[x]);
        LikeBlog(params).then((res) => {
          console.log(res);
          if (res.status == 200) {
            this.collects[x] = res.data.infomation[0];
          } else if (res.status == 401) {
            this.$store.state.footerTip = "加载失败了";
          }
        });
      }
      this.$store.commit("addcollect", this.collects);
      setTimeout(() => {
        sessionStorage.setItem("collects", JSON.stringify(this.collects));
      }, 1000);
    }

    this.nav_list1 = localStorage.getItem("nav_list1");
    this.nav_list2 = localStorage.getItem("nav_list2");
    this.nav_list3 = localStorage.getItem("nav_list3");
    this.nav_list4 = localStorage.getItem("nav_list4");

    document.getElementById("file1").addEventListener("change", () => {
      this.img = this.getObjectUrl(document.getElementById("file1").files[0]);
      console.log(this.img);
    });
  },
  methods: {
    async updateInfo() {
      await this.updatepic(document.getElementById("file1").files[0]);
      let user = this.$store.state.infomation;
      let params = new URLSearchParams();
      params.append("id", Number(user.id));
      params.append("username", this.username);
      params.append("sex", this.radio);
      params.append("birthday", this.timevalue);
      if (!this.icondata && this.$store.state.infomation.icon) {
        params.append("icon", this.$store.state.infomation.icon);
      } else {
        params.append("icon", this.icondata);
      }
      To_Up(params).then((res) => {
        console.log(res);
        this.$message({
          message: "重新登陆以获取最新信息",
          type: "success",
        });
      });
    },
    async updatepic(target) {
      if (!target) return;
      const configx = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      const file1 = target;
      const data1 = new FormData();
      let result1;
      data1.append("portrait", file1);
      this.img = this.getObjectUrl(target);
      console.log(this.img);
      try {
        result1 = await axios.post(
          "http://175.178.226.147:8080/upload",
          data1,
          configx
        );
        console.log(result1.data);
        this.icondata = result1.data;
      } catch (e) {
        console.error(e);
      }
    },
    getObjectUrl(file) {
      let url = null;
      if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file);
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file);
      }
      return url;
    },
    //导航点击事件
    navList1() {
      (this.navList = 1), (this.nav_list1 = "actived" + " " + "nav-list");
      this.nav_list2 = "nav-list";
      this.nav_list3 = "nav-list";
      this.nav_list4 = "nav-list";
      localStorage.setItem("navlist", 1);
      localStorage.setItem("nav_list1", "actived nav-list");
      localStorage.setItem("nav_list2", "nav-list");
      localStorage.setItem("nav_list3", "nav-list");
      localStorage.setItem("nav_list4", "nav-list");
    },
    navList2() {
      (this.navList = 2), (this.nav_list2 = "actived" + " " + "nav-list");
      this.nav_list1 = "nav-list";
      this.nav_list3 = "nav-list";
      this.nav_list4 = "nav-list";
      localStorage.setItem("navlist", 2);
      localStorage.setItem("nav_list2", "actived nav-list");
      localStorage.setItem("nav_list1", "nav-list");
      localStorage.setItem("nav_list3", "nav-list");
      localStorage.setItem("nav_list4", "nav-list");
    },
    navList3() {
      (this.navList = 3), (this.nav_list3 = "actived" + " " + "nav-list");
      this.nav_list1 = "nav-list";
      this.nav_list2 = "nav-list";
      this.nav_list4 = "nav-list";
      localStorage.setItem("navlist", 3);
      localStorage.setItem("nav_list3", "actived nav-list");
      localStorage.setItem("nav_list2", "nav-list");
      localStorage.setItem("nav_list1", "nav-list");
      localStorage.setItem("nav_list4", "nav-list");
      // let artical = JSON.parse(
      //   JSON.parse(this.$store.state.infomation.artical)
      // );
      //   let artical = this.$store.state.infomation.artical ? JSON.parse(JSON.parse(this.$store.state.infomation.artical)): []
      // for (let index = 0; index < artical.length; index++) {
      //   let params = new URLSearchParams();
      //   params.append("id", artical[index]);
      //   LikeDynamic(params).then((res) => {
      //     if (res.status == 200) {
      //       this.userdynamics[index] = res.data.infomation[0];
      //       if (this.userdynamics[index].comment !== "") {
      //         this.userdynamics[index].comment = JSON.parse(
      //           JSON.parse(this.userdynamics[index].comment)
      //         );
      //       }
      //     } else if (res.status == 401) {
      //       this.$store.commit("addfooterTip","加载失败了")
      //     }
      //   });
      // }
      // this.$store.commit("adduserdynamics",this.userdynamics);
      // console.log(artical);
      if (this.$store.state.userdynamics.length == 0) {
        this.$store.commit("addfooterTip", "您还没有发布动态");
      } else {
        this.$store.commit("addfooterTip", "我也是有底线的");
      }
    },
    navList4() {
      (this.navList = 4), (this.nav_list4 = "actived" + " " + "nav-list");
      this.nav_list2 = "nav-list";
      this.nav_list3 = "nav-list";
      this.nav_list1 = "nav-list";
      localStorage.setItem("navlist", 4);
      localStorage.setItem("nav_list4", "actived nav-list");
      localStorage.setItem("nav_list1", "nav-list");
      localStorage.setItem("nav_list2", "nav-list");
      localStorage.setItem("nav_list3", "nav-list");
      // let collection = JSON.parse(
      //   JSON.parse(this.$store.state.infomation.collection)
      // );
      //   let collection = this.$store.state.infomation.collection ?  JSON.parse(JSON.parse(this.$store.state.infomation.collection)): []
      // for (let x = 0; x < collection.length; x++) {
      //   let params = new URLSearchParams();
      //   params.append("id", collection[x]);
      //   LikeBlog(params).then((res) => {
      //     if (res.status == 200) {
      //       this.collects[x] = res.data.infomation[0];
      //     } else if (res.status == 401) {
      //       this.$store.commit("addfooterTip","加载失败了")
      //     }
      //   });
      // }
      // this.$store.commit("addcollect",this.collects);
      //   console.log(collection[0]);
      if (this.$store.state.collect.length == 0) {
        this.$store.commit("addfooterTip", "您还没有收藏哦");
      } else {
        this.$store.commit("addfooterTip", "我也是有底线的");
      }
    },

    //用户个人简介点击修改事件
    editTextarea() {
      this.icon3 = !this.icon3;
      this.Textarea = !this.Textarea;
    },
    //用户出生日期点击修改事件
    edittime() {
      this.icon4 = !this.icon4;
      this.timePicker = !this.timePicker;
    },
    //用户出生日期取消修改事件
    editcanceltime() {
      this.timePicker = !this.timePicker;
      this.timevalue = this.$store.state.infomation.birthday;
    },
    //用户名点击修改事件
    editname() {
      this.icon1 = !this.icon1;
      this.userNameInput = !this.userNameInput;
    },
    //用户性别点击修改事件
    editsex() {
      this.icon2 = !this.icon2;
      this.sexRadio = !this.sexRadio;
    },
    //用户性别取消修改事件
    editcancelsex() {
      this.radio = this.$store.state.infomation.sex;
      this.sexRadio = !this.sexRadio;
    },
    //用户名取消修改事件
    editcancelname() {
      this.username = this.$store.state.infomation.username;
      this.userNameInput = !this.userNameInput;
    },
    //用户个人简介取消修改事件
    editcancelTextarea() {
      this.Textarea = !this.Textarea;
    },
    //用户名提交修改事件
    Submitname() {
      this.userNameInput = !this.userNameInput;
    },
    //用户性别修改事件
    Submitsex() {
      this.sexRadio = !this.sexRadio;
    },
    //用户出生日期修改事件
    SubmitTime() {
      this.timePicker = !this.timePicker;
    },
    //用户个人简介修改事件
    SubmitTextarea() {
      this.Textarea = !this.Textarea;
    },
    //用户密码修改事件
    editpassword() {
      this.icon5 = !this.icon5;
    },
    //用户密码提交修改事件
    Submitpassword() {
      this.$message({
        message: "暂时无法修改密码",
        type: "warning",
      });
      if (this.password == "" || this.passwords == "") {
        this.icon7 = !this.icon7;
        this.passwordtext = "输入不能为空";
        setTimeout(() => {
          this.icon7 = !this.icon7;
        }, 2000);
      } else if (this.password !== this.passwords) {
        this.icon7 = !this.icon7;
        this.passwordtext = "两次输入密码不统一";
        setTimeout(() => {
          this.icon7 = !this.icon7;
        }, 2000);
      }
    },
    //用户注销账户
    cancellation() {
      this.$message({
        message: "暂时无法注销用户",
        type: "warning",
      });
      this.icon6 = !this.icon6;
    },
    time: time,
    inituserimg(t) {
      if (this.$store.state.infomation.icon) {
        this.img = this.$store.state.infomation.icon;
        return;
      }
      if (t) {
        this.img = "http://175.178.226.147:8080/boy.jpg";
      } else {
        this.img = "http://175.178.226.147:8080/girl.png";
      }
    },
  },
  computed: {
    real_them() {
      let k = this.$store.state.skin;
      let m = k == true ? "light" : "dark";
      return this.them + " " + m;
    },
    sex() {
      let sexs = "男";
      if (this.radio == 1) {
        sexs = "男";
        this.inituserimg(1);
      } else {
        sexs = "女";
        this.inituserimg(0);
      }
      return sexs;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../main.less";

.file {
  display: none;
}
.light {
  background-color: @bg_gray;
  transition: all 1s;

  .actived {
    background-color: @bg_gray;
    // transition: all 1s;
  }

  .center {
    background-color: @bg_gray;
    width: 2%;
    transition: all 1s;
  }

  .menu {
    background-color: @bg_light_contain;
    color: @fs_light_contain;
    transition: all 1s;
  }
  .modify {
    background-color: @bt_deep_light;
    transition: all 1s;
  }
  .main {
    .base {
      background-color: @bg_light_contain;
      color: @fs_light_contain;
      transition: all 1s;
    }

    .base-info-head {
      color: @fs_light_contain;
      transition: all 1s;
      border-bottom: 1px solid #f0f0f2;
    }

    .el-input__inner {
      background-color: @bg_light_contain;
      transition: all 1s;
    }
    .block /deep/ .el-textarea__inner {
      background-color: @bg_light_contain;
      transition: all 1s;
    }
    .block /deep/ .el-input__inner {
      background-color: @bg_light_contain;
      transition: all 1s;
    }
    .Change-Password /deep/ .el-input__inner {
      background-color: @bg_light_contain;
      transition: all 1s;
    }

    .edit-btn-save {
      background-color: @bt_deep_light;
      transition: all 1s;
    }

    .edit-btn-cancel {
      background-color: @bg_light_contain;
      transition: all 1s;
    }
  }
}

.dark {
  background-color: @bg_dark;
  transition: all 1s;

  .actived {
    background-color: @bg_dark;
    // transition: all 1s;
  }

  .center {
    background-color: @bg_dark;
    width: 2%;
    transition: all 1s;
  }

  .menu {
    background-color: @bg_dark_contain;
    color: @fs_dark_contain;
    transition: all 1s;
  }

  .modify {
    background-color: @bt_deep_dark;
    transition: all 1s;
  }

  .main {
    .base {
      background-color: @bg_dark_contain;
      color: @fs_dark_contain;
      transition: all 1s;
    }

    .base-info-head {
      color: @fs_dark_contain;
      transition: all 1s;
      border-bottom: 1px solid @bg_light_blue;
    }
    .el-input__inner {
      background-color: @bg_dark_contain;
      transition: all 1s;
    }
    .block /deep/ .el-textarea__inner {
      background-color: @bg_dark_contain;
      transition: all 1s;
    }
    .block /deep/ .el-input__inner {
      background-color: @bg_dark_contain;
      transition: all 1s;
    }
    .Change-Password /deep/ .el-input__inner {
      background-color: @bg_dark_contain;
      transition: all 1s;
    }

    .edit-btn-save {
      background-color: @bt_deep_light;
      transition: all 1s;
    }

    .edit-btn-cancel {
      background-color: @bg_dark;
      transition: all 1s;
    }

    // el-input el-input--prefix el-input--suffix el-date-editor--date
  }
}

.contain {
  // 博客是单屏页面
  height: 100%;
  width: 100%;
  position: relative;

  .main {
    position: absolute;
    bottom: 0;
    height: 90%;
    width: 100%;
  }
}

@media screen and (min-width: 1300px) {
  /* 大于1200px时 */
  .contain {
    .main {
      display: flex;
      justify-content: center;
      align-items: center;

      .base {
        width: 1200px;
        height: 100%;
        margin-left: 16px;
      }
    }
  }
}

@media screen and (min-width: 800px) and (max-width: 1300px) {
  /* 小于800px时 */

  .contain {
    .main {
      display: flex;
      justify-content: center;
      align-items: center;

      .base {
        width: 950px;
        height: 100%;
        overflow: auto;
        margin-left: 16px;
        margin-right: 16px;
      }
    }
  }
}

@media screen and (max-width: 800px) {
  /* 小于800px时 */
  .contain {
    .main {
      display: flex;
      justify-content: center;
      align-items: center;

      .base {
        flex-grow: 1;
        height: 100%;
        margin-left: 16px;
        margin-right: 16px;
      }
    }
  }
}

.base {
  display: flex;
}

@media screen and (min-width: 800px) {
  /* 大于1200px时 */
  .nav-bar {
    width: 15%;
    text-align: center;
    margin: 20px 0px 0px 0px;
  }
}
@media screen and (max-width: 800px) {
  /* 小于800px时 */
  .nav-bar {
    width: 25%;
    text-align: center;
    margin: 20px 0px 0px 0px;
  }
}

.nav-list {
  cursor: pointer;
  height: 40px;
  margin-bottom: 10px;
  display: block;
  text-align: center;
  line-height: 40px;
}

.base-info {
  overflow: auto;
  margin-left: 3%;
  width: 100%;
}

.general-info .general-info-avatar {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: relative;
  width: 96px;
  height: 96px;
  margin-right: 16px;
  -webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.06);
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.06);
  border: 2px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  img {
    height: 100%;
    // width: 100%;
  }
}

.general-info .person-name {
  line-height: 24px;
  font-size: 20px;
  margin-right: 16px;
}

.general-info {
  padding: 24px 0 40px 24px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.04);
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.04);
}

.general-info .general-info-t-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.base-info-head {
  height: 48px;
  line-height: 48px;
  font-size: 18px;
  font-weight: 600;
  padding-left: 20px;
}

.base-info-content {
  padding: 16px;
}

.base-info-content-show {
  padding: 16px 58px 16px 0;
  position: relative;
}

ul {
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

li {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}

ul,
li {
  list-style: none;
}

.content-show-l {
  color: #555666;
  margin-right: 40px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-left: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.modify {
  cursor: pointer;
  text-align: center;
  padding: 6px 16px 6px 16px;
  border-radius: 3px;
  color: white;
}

.content-show-r[data-v-60b18741] {
  color: #222226;
  word-break: break-all;
}

.edit-icon {
  margin-left: 24px;
  cursor: pointer;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  color: #1989fa;
  font-size: 14px;
  min-width: 50px;
}

.accout-body {
  overflow: auto;
  margin-left: 3%;
  width: 100%;
  padding: 80px 16px 0;
  min-height: 200px;
  font-size: 14px;
}

.accout-body-title {
  min-width: 72px;
  height: 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.accout-body-item {
  height: 72px;
  padding: 32px 100px 16px 0;
  margin: 0px;
}

.accout-body-item > span {
  float: left;
  width: 56px;
  height: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-left: 16px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.accout-body-item > p {
  float: left;
  text-align: right;
  width: calc(100% - 72px);
}

.accout-body-item > p a {
  display: inline-block;
  min-width: 56px;
  margin-left: 32px;
  color: #1989fa;
  text-decoration: none;
  cursor: pointer;
}

.account-box {
  padding: 32px;
}

.passwordtext {
  margin-left: 15%;
  width: 20%;
  color: red;
  font-size: 12px;
}

.module_rules p {
  margin-top: 16px;
  height: 120px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.module_rules div {
  margin-top: 20px;
}

.module_rules div span {
  margin-left: 25%;
  cursor: pointer;
  display: inline-block;
  height: 40px;
  background: red;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 400;
  padding: 0 24px;
  color: #fff;
  line-height: 40px;
}

.dynamic-title {
  margin-bottom: 30px;

  min-width: 72px;
  height: 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.dynamic-body {
  overflow: auto;
  margin-left: 3%;
  width: 100%;
  padding: 50px 16px 0;
  min-height: 200px;
  font-size: 14px;
}

.collection-body {
  overflow: auto;
  margin-left: 3%;
  width: 100%;
  padding: 50px 16px 0;
  min-height: 200px;
  font-size: 14px;
}

.collection-title {
  margin-bottom: 30px;
  min-width: 72px;
  height: 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}
</style>